<template>
  <view>
    <view class="uni-header">
      <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
      <view class="uni-group">
        <button @click="clickForm($t('common.button.add') + '角色')" class="uni-button" type="primary"
          size="mini">{{$t('common.button.add')}}角色</button>
        <button class="uni-button" type="warn" size="mini"
          @click="clickDelete($refs.table.getSelectIds())">{{$t('common.button.batchDelete')}}</button>
      </view>
      <view class="uni-group">
        <input class="uni-search" type="text" v-model="condition.keywords" @confirm="search"
          :placeholder="$t('common.placeholder.query')" />
        <button class="uni-button" type="primary" size="mini" @click="search">{{$t('common.button.search')}}</button>
        <button class="uni-button" type="default" size="mini"
          @click="reset">{{$t('common.button.reset')}}{{$t('common.button.search')}}</button>
      </view>
    </view>


    <view class="uni-container">

      <uni-table ref="table" :loading="loading" emptyText="没有更多数据" border stripe type="selection"
        @selection-change="selectionChange">
        <uni-tr>
          <uni-th align="center" width="120" filter-type="search"
            @filter-change="filterChange($event, 'name')">名称</uni-th>
          <uni-th align="center" width="200" filter-type="search"
            @filter-change="filterChange($event, 'description')">描述</uni-th>
          <uni-th align="center" width="240" filter-type="select" :filter-data="authList"
            @filter-change="filterChange($event, 'authIds')">关联权限</uni-th>
          <uni-th align="center" width="200">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item,index) in items" :key="index">
          <uni-td align="center">{{item.name}}</uni-td>
          <uni-td align="center">{{item.description}}</uni-td>
          <uni-td align="center">{{item.authsName}}</uni-td>
          <uni-td align="center">
            <view class="uni-group">
              <button @click="clickForm(item.name, item.id)" class="uni-button" size="mini"
                type="primary">{{$t('common.button.edit')}}</button>
              <button @click="clickDelete([item.id])" class="uni-button" size="mini"
                type="warn">{{$t('common.button.delete')}}</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
      <uni-pagination show-icon show-page-size :page-size="pageSize" v-model="pageCurrent" :current="pageCurrent"
        :total="total" @change="changePage" @pageSizeChange="changeSize" />
    </view>
  </view>

  <fix-window />

</template>


<script>
  import {
    mapActions
  } from "vuex"
  export default {
    data() {
      return {
        pageSize: 20,
        pageCurrent: 1,
        total: 0,
        items: [],
        loading: true,
        selectIds: [],
        condition: {
          keywords: "",
        },
        authList: [],
      }
    },

    onLoad() {
      this.form().then(data => {
        this.authList = data.authIds.map(auth => {
          return {
            text: auth.name,
            value: auth.id
          }
        });

      });
    },
    onShow() {
      this.search()
    },
    methods: {
      ...mapActions('role', ['form', 'list', 'save', 'delete', 'batchDelete']),
      clickDelete(ids) {
        const that = this
        uni.showModal({
          title: "确认删除指定记录吗？",
          success(e2) {
            if (e2.cancel) {
              return;
            }
            that.delete({
              ids: ids
            }).then(_ => {
              uni.showToast({
                title: "操作成功"
              })
              that.search();
            })
          }
        })
      },
      // 搜索
      search() {
        this.selectIds = [];
        if (this.$refs.table) {
          this.$refs.table.clearSelection();
        }


        this.loading = true
        this.items = [];
        let conditionCopy = JSON.parse(JSON.stringify(this.condition))
        conditionCopy.page = this.pageCurrent;
        conditionCopy.limit = this.pageSize;
        this.list(conditionCopy).then(data => {
          this.items = data.list
          this.total = data.count
          this.loading = false
        });
      },
      reset() {
        this.condition.keywords = "";
        this.search();
      },
      clickForm(title, id = 0) {
        uni.navigateTo({
          url: `/pages/unify/role/form?title=${title}&id=${id}`
        });
      },
      changeSize(e) {
        this.pageSize = e;
        this.pageCurrent = 1;
        this.search()
      },
      changePage(e) {
        this.pageCurrent = e.current;
        this.search()
      },
      getSelectIds() {
        if (!this.selectIds.length) {
          uni.showToast({
            title: "请指定操作的记录",
            icon: "none"
          })
          throw new Error("请指定操作的记录");
        }
        return this.selectIds
      },
      selectionChange(e) {
        this.selectIds = []
        e.detail.index.forEach(index => {
          this.selectIds.push(this.items[index].id)
        })
      },
      filterChange(e, field) {
        switch (e.filterType) {
          case "search":
            this.condition[field] = e.filter
            break
          case "select":
            this.condition[field] = e.filter
            break
          case "range":
            this.condition[field] = e.filter
            break;
          case "date":
          case "timestamp":
            if (e.filter[0]) {
              e.filter[0] /= 1000
            }
            if (e.filter[1]) {
              e.filter[1] /= 1000
            }
            this.condition[field] = e.filter
            break;
        }

        this.search()
      },
    }
  }
</script>